import {
  UserOutlined,
  CoffeeOutlined,
  ProfileOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { Link } from "react-router-dom";
import React from "react";
import { Redirect, Route } from "react-router-dom";
import { HashRouter as Router } from "react-router-dom";
import routers from "../router/index";
import "./home.css"
const { Header, Content, Footer, Sider } = Layout;
const items2 = [
  {
    key: 2,
    label: "用户列表",
    icon: <UserOutlined />,
    children: [
      {
        key: "2-1",
        label: "用户信息",
        path: "/users/edit",
      },
      {
        key: "2-2",
        label: "增加列表",
        path: "/users/add",
      },
    ],
  },
  {
    key: 3,
    icon: <CoffeeOutlined />,
    label: "饮食列表",
    children: [
      {
        key: "3-1",
        label: "增加列表",
        path: "/food/add",
      },
      {
        key: "3-2",
        label: "食物信息",
        path: "/food/edit",
      },
    ],
  },
  {
    key: 4,
    icon: <ProfileOutlined />,
    label: "内容列表",
    children: [
      {
        key: "4-1",
        label: "增加列表",
        path: "/content/add",
      },
      {
        key: "4-2",
        label: "内容信息",
        path: "/content/edit",
      },
    ],
  },
];

const Home = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout>
      <Header className="header">
        <div className="logo">
          <img
            src="https://img.zcool.cn/community/01c7215a5429f5a80120121f1cab2c.gif"
            alt=""
            className="logo-img"
          />
          <div className="cy">橙柚膳食后台管理</div>
        </div>
      </Header>
      <Content
        style={{
          padding: "0 50px",
        }}
      >
        <Breadcrumb
          style={{
            margin: "16px 0",
          }}
        >
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        {/* 侧边栏 */}
        <Layout
          style={{
            padding: "24px 0",
            background: colorBgContainer,
          }}
        >
          <Router>
            <Sider
              style={{
                background: colorBgContainer,
              }}
              width={200}
            >
              <Menu mode="inline" style={{ height: "100%" }}>
                <Menu.Item key="1" title="首页">
                  <Link to="/home">首页</Link>
                </Menu.Item>
                {items2.map((item) => (
                  <Menu.SubMenu key={item.key} title={item.label}>
                    {item.children.map((child, index) => (
                      <Menu.Item key={`${item.key}-${index + 1}`}>
                        <Link to={child.path}>{child.label}</Link>
                      </Menu.Item>
                    ))}
                  </Menu.SubMenu>
                ))}
              </Menu>
            </Sider>

            {/* 主内容 */}
            <Content
              style={{
                padding: "0 24px",
                minHeight: 280,
              }}
            >
              {routers.map((item) => {
                if (item.redirect) {
                  return (
                    <Route key={item.path} from={item.from} to={item.to} />
                  );
                }
                return (
                  <Route
                    key={item.path}
                    path={item.path}
                    exact={item.exact}
                    component={item.component}
                  />
                );
              })}
            </Content>
          </Router>
        </Layout>
      </Content>
      <Footer
        style={{
          textAlign: "center",
        }}
      >
        Background management of orange and pomelo meals
      </Footer>
    </Layout>
  );
};

export default Home;
